<template>
	<MyPage title="" :isback="true">
		<view slot="gBody">
			<view class="login-title">{{titleType}}密码</view>
			
			<view class="login-content">
				<u-form :model="form" ref="uForm">
					<u-form-item prop="username">
						<u-input v-model="form.username" placeholder="请输入手机号码" maxlength="11" :trim="true" />
					</u-form-item>
					<u-form-item prop="yzm">
						<u-input v-model="form.yzm" placeholder="请输入手机验证码" maxlength="5" :trim="true" />
						<u-button size="mini" slot="right" type="success" @click="getCode">{{codeText}}</u-button>
					</u-form-item>
					<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
					<u-form-item prop="password">
						<u-input type="password" placeholder="请输入新密码" maxlength="20" :trim="true" v-model="form.password" />
					</u-form-item>
					<MyBtn :title="'立即'+titleType" @click="formSubmit"></MyBtn>
				</u-form>
				<view class="grey margin-top60 font24 u-text-center" v-if="titleType=='找回'">不想改密码了？<span class="blue" @click="openPage('/login/login')">用账号登录</span></view>
			</view>
		</view>
	</MyPage>
</template>		
 	
<script>
import { sendCode,retrievePassword } from '@/api/login.js'
export default {
	data() {
		return {
			titleType: '',
			// 发送验证码和协议
			code: '',
			codeText: '',
			checked: false,
			// form
			form: {
				username: '',
				yzm: '',
				password: ''
			},
			rules: {
				username: [
					{
						required: true,
						message: '请填写手机号码',
						trigger: ['change','blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change','blur'],
					}
				],
				yzm: [
					{
						required: true,
						message: '请填写验证码',
						trigger: ['change','blur']
					},
					{
						min: 4,
						message: '验证码不能少于4位数',
						trigger: 'change'
					}
				],
				password: [
					{
						required: true,
						message: '请填写新密码',
						trigger: ['change','blur']
					},
					{
						min: 6,
						message: '新密码不能少于6位数',
						trigger: 'change'
					}
				]
			}
		}
	},
	onLoad(option) {
		//获取路由参数
	    this.titleType = option.titleType ? option.titleType : '找回';
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);  //验证初始化
	},
	methods: {
		// 跳转页面
		openPage(url){
			this.$utils.redirectTo(url);
		},
		// 发送验证码
		codeChange(text) {
			this.codeText = text;
		},
		getCode() {
			if( !this.$u.test.mobile(this.form.username) ){
				uni.showToast({
				    title: "请输入正确的手机号码！", 
				    icon:"none"
				});
				return false;
			};
			if(this.$refs.uCode.canGetCode) {
				sendCode({
					mobile: this.form.username
				}).then(res=>{
					uni.showToast({
						title: "发送成功，请注意短信查收！", 
						icon:"none"
					});
				}).catch(err=>{
					uni.showToast({
						title:err,
						icon:'none'
					})
				});
				setTimeout(() => {
					uni.hideLoading();
					this.$refs.uCode.start();
				}, 1000);
			}else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		// 提交注册
		formSubmit(){
			this.$refs.uForm.validate(valid => {
				if (valid) {
					retrievePassword(this.form).then(res=>{
						this.$utils.redirectTo('/common/success',{
							title:"找回密码成功！",
							subTitle:"赶快用新账号进行登录吧！",
							btnValue:"去登录",
							url:'/login/login'
						});
					}).catch(err=>{
						uni.showToast({
							title: err.msg,
							icon:'none'
						})
					});
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.login-title{
	margin-top:120rpx;
}
.login-content{
	padding:70rpx;
	/deep/ .uni-input-input{
		font-size:36rpx;
	}
}
</style>